<template>
  <view class="container">
    <!-- 数字键盘666 -->
    <view class="grid">
      <view 
        class="grid-item" 
        :class="{ active: activeIndex === index }" 
        :style="activeIndex === index ? { backgroundColor: currentColor } : {}"
        v-for="(item, index) in numbersDlt" 
        :key="index"
      >
        {{ item }}
      </view>
    </view>

    <!-- 控制按钮 -->
    <button 
      class="start-btn" 
      :disabled="isRunning" 
      @click="startLottery"
    >
      {{ isRunning ? "正在抽奖..." : "开始" }}
    </button>
  </view>
</template>



<script>
export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0], // 数字键盘
      numbersDlt: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0,11,12,13,14,15,16,17,18,19,20,21,22,23,24], // 数字键盘
      activeIndex: null, // 当前高亮的索引
      isRunning: false, // 按钮状态
      timer: null, // 定时器
      colors: ["#FF5733", "#33FF57", "#3357FF", "#FF33A8", "#33FFF6"], // 预定义的五彩斑斓的颜色
      currentColor: "#FF5733", // 当前高亮的背景色
    };
  },
  methods: {
    startLottery() {
      if (this.isRunning) return;

      this.isRunning = true; // 禁用按钮
      this.activeIndex = 0; // 初始化高亮索引
      let step = 0; // 记录步数

      // 模拟走马灯效果
      this.timer = setInterval(() => {
        this.activeIndex = (this.activeIndex + 1) % this.numbersDlt.length;
        this.currentColor = this.colors[Math.floor(Math.random() * this.colors.length)]; // 随机获取一个颜色
        step++;

        // 随机停止
        if (step > 20 && Math.random() > 0.8) {
          clearInterval(this.timer); // 停止定时器
          this.isRunning = false; // 启用按钮
          const selectedNumber = this.numbersDlt[this.activeIndex];
          console.log("选中数字：", selectedNumber); // 打印选中的数字
        }
      }, 100);
    },
  },
};
</script>



<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 200px;
  margin-bottom: 20px;
}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 18px;
  font-weight: bold;
  color: #333;
  transition: background-color 0.3s ease;
}

.grid-item.active {
  color: #fff;
}

.start-btn {
  width: 100px;
  height: 40px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
}

.start-btn:disabled {
  background: #aaa;
}
</style>
